<template>
  <div class="xtx_goods_new">
    <div class="container">
      <!-- 面板头部 -->
      <div class="xtx_panel_header">
        <h3>
          新鲜好物
          <small>新鲜出炉 品质靠谱</small>
        </h3>
        <a href="javascript:;" class="more" @click="$router.push('/new')">
          查看全部
          <i class="iconfont icon-angle-right"></i>
        </a>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods">
        <router-link :to="`/product/${item.id}`" v-for="item in goods" :key="item.id">
          <img :src="item.picture" alt />
          <span class="name">{{item.name}}</span>
          <span class="price">
            <small>￥</small>
            {{item.price}}
          </span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-new',
  data () {
    return {
      goods: []
    }
  },
  created () {
    this.getGoods()
  },
  methods: {
    getGoods () {
      this.$http.get('/home/new').then((res) => {
        this.goods = res.data.result
      })
    }
  }
}
</script>

<style scoped lang='less'>
@import "../styles/_mixins.less";
.xtx_goods_new {
  .home_panel_header();
  .xtx_panel_goods {
    display: flex;
    justify-content: space-between;
    a {
      background-color: #f0f9f4;
      transition:all 0.5s;
      top: 0;
      display: inline-block;
      width: 306px;
      height: 406px;
      text-align: center;
      transform: translateZ(0);
      &:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px) translateZ(0);
      }
    }
    img {
      width: 306px;
      height: 306px;
    }
    .name {
      display: inline-block;
      width: 100%;
      margin: 12px 0 10px;
      font-size: 22px;
    }

    .price {
      font-size: 23px;
      color: @priceColor;
    }

    small {
      font-size: 16px;
    }
  }
}
</style>
